<script setup lang="ts">
import AccFormItem from './components/acc-form-item.vue';
import router from '@/utils/router';

/**
 * 订单细单表单数据结构
 */
interface OrderDtlForm {
  orderDtlId: string; // 细单ID（编辑时存在）
  goodsDtlId: string; // 货品细单ID
  goodsId: string; // 货品ID
  goodsName: string; // 货品名称
  goodsQty: string; // 验收数量
  udiCode: string; // UDI码
  udiQty: string; // UDI码数量
  udiLevel: string; // UDI码包装层级
  creDate: string; // 采集时间
  memo: string; // 备注
}

const appStore = useAppStore();
const directStore = useDirectStore();

const formData = ref<OrderDtlForm>({
  orderDtlId: '',
  goodsDtlId: '',
  goodsId: '',
  goodsName: '',
  goodsQty: '',
  udiCode: '',
  udiQty: '',
  udiLevel: '',
  creDate: '',
  memo: '',
});

const status = ref(1);

/**
 * 保存细单数据（新增或修改）
 */
const handleSave = async () => {
  // 表单验证
  if (!formData.value.goodsQty || +formData.value.goodsQty <= 0) {
    showError('请输入有效的验收数量');
    return;
  }

  const isEdit = !!formData.value.orderDtlId;

  // 构建请求参数
  const params: Record<string, string | number> = {
    goodsQty: +formData.value.goodsQty,
    memo: formData.value.memo || '',
  };

  if (isEdit) {
    // 修改细单
    params.orderDtlId = formData.value.orderDtlId;
    await DirectService.modifyOrderDtl(params);
  } else {
    // 新增细单
    Object.assign(params, {
      customId: directStore.customerObj.customId,
      entryId: directStore.customerObj.entryId,
      orderId: directStore.directDetailObj.orderId,
      goodsDtlId: formData.value.goodsDtlId,
      goodsId: formData.value.goodsId,
      creDate: formData.value.creDate,
      udiCode: formData.value.udiCode,
      udiQty: +formData.value.udiQty,
      udiLevel: formData.value.udiLevel,
    });
    await DirectService.addOrderDtl(params);
  }

  showSuccess(isEdit ? '修改成功' : '保存成功');
  directStore.setHadDoneOnDtl(true); // 设置细单操作标志
  router.back();
};

onLoad((opts: any) => {
  const decodedOpts = decodeObjectValues(opts);

  if (decodedOpts.item) {
    formData.value = JSON.parse(decodedOpts.item) as OrderDtlForm;
  }

  status.value = decodedOpts.status ? +decodedOpts.status : 0;
  console.log('status', decodedOpts.status, status.value);
});
</script>

<template>
  <view class="px-4 pt-10">
    <view class="text-17 flex font-bold">
      <view>细单</view>
      <view class="color-main-3">详情</view>
    </view>
    <view class="view-shadow mt-2">
      <up-form>
        <acc-form-item label="细单ID">
          <view class="w-full text-right color-gray-5">
            {{ formData.orderDtlId || '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="货品ID/名称" class="bg-white">
          <view class="w-full text-right color-gray-5">
            {{ formData.goodsId ? `${formData.goodsId}/${formData.goodsName}` : '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="验收数量" class="bg-white">
          <up-input
            v-if="status === 1"
            v-model="formData.goodsQty"
            placeholder="点击输入验收数量"
            :type="'digit'"
            :color="appStore.theme.color.primary"
            inputAlign="right"
            fontSize="28rpx"
            border="none"
          />
          <view v-else class="w-full text-right color-main-3">
            {{ formData.goodsQty }}
          </view>
        </acc-form-item>
        <acc-form-item label="UDI码" class="bg-white">
          <view class="w-full text-right color-gray-5">
            {{ formData.udiCode || '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="UDI码数量" class="bg-white">
          <view class="w-full text-right color-gray-5">
            {{ formData.udiQty || '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="UDI码包装层级" class="bg-white">
          <view class="w-full text-right color-gray-5">
            {{ formData.udiLevel || '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="采集时间" class="bg-white">
          <view class="w-full text-right color-gray-5">
            {{ formData.creDate || '-' }}
          </view>
        </acc-form-item>
        <acc-form-item label="备注" class="bg-white" :borderBottom="false">
          <up-input
            v-if="status === 1"
            v-model="formData.memo"
            placeholder="点击输入备注"
            inputAlign="right"
            fontSize="28rpx"
            border="none"
          />
          <view v-else class="w-full text-right color-gray-5">
            {{ formData.memo || '无' }}
          </view>
        </acc-form-item>
      </up-form>
    </view>
    <app-bottom-actions v-if="status === 1" class="block mt-16" :count="2" :fixed="false">
      <app-action-btn class="flex-1" text="取消" @click="router.back()" />
      <app-action-btn class="flex-1" text="保存" type="primary" @click="handleSave" />
    </app-bottom-actions>
  </view>
</template>
